<template>
	<m-layout title="团长认证" barBg="unset">
		<view class="flex-around" style="margin: 30rpx 0  40rpx;">
			<view class="dl flex-column flex-center">
				<view class="radius-box flex-center">
					<view class="radius flex-center">
						1
					</view>
				</view>
				<m-text spa="10 0 0" color="#0E5181">提交申请</m-text>
			</view>
			<m-icon type="fenge1" wh="45 15" spa=" 0 0 40"></m-icon>
			<view class="dl flex-column flex-center">
				<view class="radius-box flex-center">
					<view class="radius flex-center">
						2
					</view>
				</view>
				<m-text spa="10 0 0" color="#0E5181">平台审核</m-text>
			</view>
			<m-icon type="fenge1" wh="45 15" spa=" 0 0 40"></m-icon>
			<view class="dl flex-column flex-center">
				<view class="radius-box flex-center">
					<view class="radius flex-center">
						3
					</view>
				</view>
				<m-text spa="10 0 0" color="#0E5181">开店营业</m-text>
			</view>
		</view>

		<m-block gap="20 30" spa="20 0" class="from">
			<m-text block icon="icon-zhengjian2" iconSize="38" iconColor="var(--theme)" bold>基本信息</m-text>
			<view class="flex-center">
				<m-button className="flex-column flex-center " bgColor="unset" openType="chooseAvatar"
					@chooseavatar="chooseavatar">
					<m-image :src="headpic" wh="120" radius="100"></m-image>
					<view class="icon-Menu">
						<m-icon type="icon-shezhi1" wh="32"></m-icon>
					</view>
				</m-button>
			</view>
			<m-line spa="20  0 0"></m-line>

			<m-input gap="24 0" bottomBorder v-model="trueName" placeholder="请填写真实姓名">
				<m-text className="label" slot="left" ftsize="28">姓名</m-text>
			</m-input>
			<m-input gap="24 0" bottomBorder v-model="phone" placeholder="请填写联系方式">
				<m-text className="label" slot="left" ftsize="28">联系方式</m-text>
			</m-input>
			<m-input gap="24 0" bottomBorder v-model="businessLicense" disabled placeholder="证件类型">
				<m-text className="label" slot="left" ftsize="28">证件类型</m-text>
			</m-input>

			<m-input gap="18 0" bottomBorder v-model="are" disabled placeholder="请选择省市区县、乡镇">
				<m-text className="label" slot="left" ftsize="28">所在地区</m-text>
				<m-image src="http://117.24.6.18:5003/static/tzimg/dingwei1.png" wh="44" slot="right" @click="location">
				</m-image>
			</m-input>
			<m-block className="pick-regions flex-between" radius="0">
				<view class="left flex-between">
					<m-text className="label" ftsize="28">详细地址</m-text>
					<textarea class="textarea" v-model="address" auto-height placeholder="请填入详细地址"
						placeholder-class="placeholder"></textarea>
				</view>
			</m-block>

			<!-- <m-block gap="24 0 10" className="pick-regions flex-between" radius="0">
				<view class="left flex-between" style="padding: 0;">
					<m-text className="label" ftsize="28">所在地区</m-text>
					<view class="flex-1 content-1">
						<pick-regions :defaultRegion="are" @getRegion="handleGetRegion">
						
							<template v-if="are.length >0 ">
								<m-text ftsize="28">{{ are.join(' ') }}</m-text>
							</template>
							<template v-else>
								<m-text color="#999">请选择省市区县、乡镇</m-text>
							</template>
						</pick-regions>
					</view>
					<m-icon type="icon-dingwei" wh="38" color="#333"></m-icon>
				</view>
			</m-block> -->
		</m-block>
		<m-block gap="20 30" spa="20 0">
			<view class="flex-between">
				<m-text icon="icon-zhengjian2" iconSize="38" iconColor="var(--theme)" bold>证件信息</m-text>
				<m-text color="var(--theme)" ftsize="24">* 图片大小不超过3M</m-text>
			</view>
			<uploadPhoto v-model="imgList" placeholder="请上传证件信息" :length="2"></uploadPhoto>
			<m-text color="#FC8C23" ftsize="24">* 身份证需上传正反面</m-text>
		</m-block>
		<m-block gap="20 30" className="flex" bgColor="#F95F5F" v-if="info.state == 3">
			<m-icon type="icon-jingshi-shiyuan" color="#fff" wh="28" spa="0 15 0 0"></m-icon>
			<m-text color="#fff" ftsize="26">{{info.reason}}</m-text>
		</m-block>

		<m-block gap="20 30">
			<view class="flex-between">
				<m-text icon="icon-zhengjian2" iconSize="30" iconColor="var(--theme)" bold>设置团长登录密码</m-text>
				<m-button gap="10 30"
					@click="Jump('/pagesA/login/retrieved/retrieved')">{{userinfo.password ==1?"修改":'设置'}}</m-button>
			</view>
		</m-block>

		<template v-if="info.state == 2">
			<m-button block spa="60 0 50" disabled type="disabled"> 审核中 </m-button>
		</template>
		<template v-else>
		<m-button block spa="60 0 50" :loading="isLoading " @click="submit"> 提交 </m-button>
		</template>
	</m-layout>

</template>

<script>
	import { Edit, Info } from '@/api/Heads.js'
	import { UploadWebUrl } from '@/api/Ctrls.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				trueName: '',
				businessLicense: '营业执照/身份证',
				headpic: '',
				phone: '',
				are: [],
				imgList: [],
				address: '',
				isLoading: false,
				isShow: false,
				info: {},
				latitude: 0,
				longitude: 0,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
		},
		onLoad() {
			this.init()
		},
		methods: {


			async location() {
				const { addressComponent, formatted_address, latitude, longitude } = await this.chooseLocation(false)
				this.latitude = latitude
				this.longitude = longitude
				this.address = formatted_address
				this.are = [addressComponent['province'], addressComponent['city'] || addressComponent['province'],
					addressComponent['district']
				]

			},
			async chooseavatar({ detail: { avatarUrl } }) {
				let bast64 = uni.getFileSystemManager().readFileSync(avatarUrl, 'base64')

				uni.showLoading()
				const { success, msg, data } = await UploadWebUrl({
					ctype: 2,
					content: bast64,
				})
				this.Toast(success ? '获取成功' : '操作失败')
				uni.hideLoading()
				if (success) {
					this.headpic = msg
				}
			},
			async init() {
				this.Info()
			},
			async Info() {
				const { data, success } = await Info()
				this.info = data;
				this.trueName = data['trueName']
				this.headpic = data['headpic']
				this.phone = data['phone']
				this.latitude = data['latitude']

				this.address = data['address']
				this.longitude = data['longitude']
				// this.are = !data['province'] ? [] : [data['province'], data['city'], data['district']]
				this.are = [data['province'], data['city'], data['district']]
				this.imgList = data['businessLicense'].split(',').filter(x => x)
			},

			// 确认
			async submit() {
				if (!this.trueName) {
					return this.Toast('请填写真实姓名');
				}
				if (!this.phone) {
					return this.Toast('请填写联系方式');
				}
				if (!this.address) {
					return this.Toast('请填写详细地址');
				}
				if (this.are.length <= 0) {
					return this.Toast('请选择所在区域');
				}
				if (!this.imgList) {
					return this.Toast('请上传证件信息');
				}
				this.isLoading = true;
				const { success, msg } = await Edit({
					...this.info,
					trueName: this.trueName,
					headpic: this.headpic,
					districtX: this.latitude,
					districtY: this.longitude,
					address: this.address,
					phone: this.phone,
					province: this.are[0],
					city: this.are[1],
					district: this.are[2],
					businessLicense: this.imgList.join(','),
					state: 2,
				})
				this.isLoading = false;
				this.Toast(msg);
				if (success) {
					this.init();
				}


			},


			// 省市区三级联动选择的地区
			handleGetRegion(region) {
				this.are = region.map(item => {
					return item.label
				}, []);
			},

		},
		onPullDownRefresh() {
			this.init();
		},

	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(0deg, #62BEFF 0%, #C2E5FB 100%) #f6f6f6 no-repeat;
		background-size: 750rpx 440rpx;
	}

	.icon-Menu {
		position: absolute;
		right: 10%;
		bottom: 3%;
	}

	.radius-box {

		width: 65rpx;
		height: 65rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;

		.radius {
			width: 45rpx;
			height: 45rpx;
			background: #FFFFFF;
			border-radius: 50%;

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #5CBBF7;
		}
	}

	.from {
		/deep/ .m-input {
			display: flex;

			input {
				font-size: 28rpx !important;
			}

			.placeholder {
				font-size: 28rpx;
			}
		}

		.label {
			width: 150rpx;
		}
	}

	.pick-regions {
		// border-bottom: 2rpx solid var(--border);
		align-items: center;

		.left {
			padding: 24rpx 0;
			flex: 1;
			align-items: center;

			.uni-picker {
				flex: 1;
				font-size: var(--fs_28);
				color: var(--text);
				font-family: PingFang SC;
				font-weight: 400;
			}

			.textarea {
				padding-top: 8rpx;
				width: unset;
				flex: 1 !important;
				font-size: var(--fs_30);
				color: var(--text);
				font-family: PingFang SC;
				font-weight: 400;

			}

			.placeholder {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.contente-1 {}
	}
</style>